<template>
  <el-radio-group class="radio-color" v-model="checkedVal">
    <el-radio
      class="radio-cell"
      v-for="(item, index) in optionsData"
      :key="index"
      :label="item.value"
      :value="item.value">
      <span class="border" :style="`border-color:${item.color};`"><i class="back" :style="`background-color:${item.color};`"></i></span>
    </el-radio>
  </el-radio-group>
</template>

<script>
export default {
  name: 'EnRadioColor',
  props: ['optionsData', 'defaultData'],
  model: {
    event: 'change'
  },
  data() {
    return {
      checkedVal: this.defaultData
    }
  },
  watch: {
    defaultData (newVal) {
      this.checkedVal = newVal;
    },
    checkedVal (newVal) {
      this.$emit('change', newVal);
    }
  }
}
</script>

<style type="text/scss" lang="scss">
.radio-color {
  display: flex;
  align-items: center;
  /deep/ .radio-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 0;
    cursor: pointer;
    .el-radio__input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
    }
    .el-radio__label {
      padding-left: 0;
    }
    .border {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      border-style: solid;
      border-width: 1px;
      border-radius: 10px;
      box-sizing: border-box;
      overflow: hidden;
      .back {
        width: 12px;
        height: 12px;
        border-radius: 6px;
      }
    }
    & + .radio-cell {
      margin-left: 10px;
    }
    &.is-checked {
      .border {
        border-color: #3870EA!important;
        background-color: #e0edff;
      }
    }
  }
}
</style>
